<template>
    <view class='text-center co-white over' :style="{'background': isGreaterThanCurTime?'#FFD042':'#FF4242'}" v-if="expectPickupTime">{{ isGreaterThanCurTime? '剩 ':'超 '}}{{ formatDuringText }}</view>
    <view class='text-center co-white over' v-else></view>
</template>
<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { computed, defineProps } from 'vue'
    import { greaterThanCurTime, getDiffTimeText } from '../../../../hooks/useDatetimeUtil';

    const props = defineProps<{
        expectPickupTime?:any;
        currentTime?:any;
    }>()

    const isGreaterThanCurTime = computed(() => {
        if (!!props.expectPickupTime) {
            return greaterThanCurTime(new Date(props.expectPickupTime.replace(/-/g, "/")));
        }
    })

    const formatDuringText= computed(() => {
        if (!!props.expectPickupTime) {
            return getDiffTimeText(new Date(props.expectPickupTime.replace(/-/g, "/")));
        }
    })

</script>
<style lang="scss" scoped>
@import '../../common/common.css';
.over{
    border-radius: 0rpx 6rpx 0rpx 6rpx;
    height: 30rpx;
    width: 114rpx;
    line-height: 30rpx;
    margin-left: 15rpx;
}
</style>
